<template>
  <div v-if="show" :style="menuStyle" class="custom-context-menu">
    <!-- 你的菜单项 -->
    <ul>
      <li @click="menuAction(0)">
        <svg t="1729423473622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4303" width="18" height="18">
          <path
            d="M511.994264 511.994264m-511.994264 0a511.994264 511.994264 0 1 0 1023.988529 0 511.994264 511.994264 0 1 0-1023.988529 0Z"
            fill="#28176D" p-id="4304" data-spm-anchor-id="a313x.search_index.0.i1.b8c43a81MnAAVV" class="selected">
          </path>
          <path
            d="M769.87841 652.183853h-53.444341V522.260992h53.444341zM789.528583 522.260992h-19.650173v129.922861h84.898383V522.260992h-65.24821z"
            fill="#F8C642" p-id="4305"></path>
          <path d="M772.012054 782.095242h-55.577985V652.172382H772.012054z" fill="#F8C642" p-id="4306"></path>
          <path
            d="M842.777913 782.095242h-72.910974V652.183853h84.886912v117.923981a11.99888 11.99888 0 0 1-11.975938 11.987408z"
            fill="#7B49B6" p-id="4307"></path>
          <path d="M836.571992 522.260992H716.434069V392.338132h120.137923z" fill="#FC3A64" p-id="4308"></path>
          <path d="M854.776793 522.260992h-65.24821V392.338132h65.24821z" fill="#FFFFFF" p-id="4309"></path>
          <path
            d="M348.518131 692.73456l-20.18932 88.95919H169.211736l126.951818-522.14628h224.124391l120.447646 522.157751H483.316253l-20.533455-88.959189z m28.047095-122.48952h58.170477l-28.735367-127.640091z"
            fill="#F8C642" p-id="4310"></path>
          <path d="M296.163554 259.54747l-22.896524 94.190059H542.014406l-21.726461-94.190059H296.163554z"
            fill="#7B49B6" p-id="4311"></path>
          <path d="M220.625674 570.24504h214.1215l28.047095 122.48952H190.846427l29.779247-122.48952z" fill="#FC3A64"
            p-id="4312"></path>
          <path d="M406.000336 442.604949h156.513112l29.435111 127.640091H434.747174l-28.746838-127.640091z"
            fill="#FFFFFF" p-id="4313"></path>
          <path d="M718.556241 241.893286h134.098379v47.61697H718.556241z" fill="#FC3A64" p-id="4314"></path>
          <path d="M718.556241 288.087826h134.098379v47.61697H718.556241z" fill="#FC3A64" p-id="4315"></path>
        </svg>
        <span class="item">
          人工智能
        </span>
      </li>
      <li @click="menuAction(1)">
        <div>
          <i class="iconfont icon-yinle"></i>
          <span class="item">
            播放音乐
          </span>
        </div>
      </li>

      <li @click="menuAction(2)">
        <div>
          <i class="el-icon-refresh-left"></i>
          <span class="item">
            刷新网页
          </span>
        </div>
      </li>

      <li @click="menuAction(3)">
        <div>
          <i class="el-icon-info"></i>
          <span class="item">
            关于作者
          </span>
        </div>
      </li>


    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        menuStyle: {
          position: 'fixed',
          top: 0,
          left: 0,
        },
      };
    },
    methods: {
      openMenu(event) {
        this.show = true;
        this.menuStyle.top = `${event.clientY}px`;
        this.menuStyle.left = `${event.clientX}px`;
      },
      closeMenu() {
        this.show = false;
      },
      menuAction(action) {
        // 处理菜单项点击事件
        console.log(`Action: ${action}`);
        switch (action) {
          case 0:
            this.$store.dispatch("aiShow")
            break;
          case 1:
            document.querySelector(".right").children[4].click()
            break;
          case 2:
            window.location.reload();
            break;
          case 3:
            // 跳转到geit的页面
            window.open("https://gitee.com/cwsadsa")
            break;
        }
        this.closeMenu();
      },
    },
  };
</script>

<style>
  .custom-context-menu {
    /* 你的样式 */
    background-color: white;
    border: 1px solid #ccc;
    height: 182px;
    width: 160px;
    border-radius: 8px;
    z-index: 9999;
    overflow: hidden;
  }

  .custom-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .custom-context-menu li {
    padding: 7px 10px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid gainsboro;
    cursor: pointer;
  }

  .custom-context-menu li:hover {
    background-color: #f0f0f0;
  }

  .item {
    font-size: 18px;
  }

  /deep/ .el-icon-refresh-left .el-icon-info {
    font-size: 16px;
  }
</style>